<!--
 * @Author: Mcc
 * @Date: 2024-07-30 16:13:56
 * @LastEditors: mcc 550539422@qq.com
 * @LastEditTime: 2024-07-30 16:14:24
 * @FilePath: \ft-apply-admin\src\views\ApplicationList\ApplicationList.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by Mcc, All Rights Reserved. 
-->
<template>
  <div class="hr-data">
    <div class="flex justify-between mb-16px">
      <div>
        <span class="font-size-20px font-bold mr-16px">HR数据</span>
      </div>
      <a-range-picker @change="onChange" valueFormat="YYYY-MM-DD"/>
    </div>
    <div class="bottom_table">
      <div class="text-right">
        <a-input-search
          v-model:value="keywords"
          placeholder="输入姓名或手机号搜索"
          style="width: 368px"
          maxlength="11"
          @search="onSearch"
        />
        <a-select
          class="mx-10px"
          allowClear
          v-model:value="status"
          placeholder="请选择状态"
          style="width: 150px"
          :options="options"
        ></a-select>
        <a-button>
          <template #icon><clear-outlined /></template>
          重置
        </a-button>
      </div>
      <div class="result-wrap">
        <div class="inner" v-show="resultList.length > 0">
          <span v-for="item in resultList" class="result-item">
            {{ item.value }}
            <CloseOutlined @click="remove(item)" />
          </span>
          <span @click="removeAll" class="result-clear">清空条件</span>
        </div>
      </div>
      <BasicTable @register="registerTable">
       <template #customFilterDropdown="{ setSelectedKeys, selectedKeys, confirm, visible, clearFilters, column }">
          <Dropdown 
            :column="column" 
            :state="state" 
            @handleReset="handleReset(column)"
            @handleSearch="handleSearch(selectedKeys,confirm,column)"
            @handleInputChange="handleInputChange($event,column)"
            @onCheckAllChange="onCheckAllChange(column)"
          />
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'status'">
            {{ record.status == 1 ? '在职' : '离职' }}
          </template>
        </template>
      </BasicTable>
      <div style="display: flex;align-items: baseline;" class="table_btnC">
        <a-checkbox v-model:checked="allchecked" @click="selectAllRows">全选</a-checkbox>
        <a-button class="btn" type="primary" size='default' style="margin-left: 10px;">数据导出</a-button>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref , computed } from 'vue'
import { columns } from './components/data.ts'
import { BasicTable, useTable, TableAction } from '@/components/Table'
import Dropdown from '@/views/HRData/components/Dropdown.vue'
import { useTableInit } from '@/views/HRData/components/useTableInit.js'

// 改变时间
const time = ref<[]>([])
function onChange(val:[]){
  time.value = val
}

//表格操作
const resultList = ref<any>([])

// 状态
const state = ref<any>({})
const keywords = ref<string>('')
const status = ref<any>(null)
const options = computed(() => {
  return [
    {
      value: '1',
      label: '在职'
    },
    {
      value: '0',
      label: '离职'
    },
  ]
})

// 搜索
function onSearch(){}

const allchecked = ref(false)

const tableData = ref([
  {
    key: '1',
    times: '文西',
    status: 0,
    region: '一部',
    a: 213,
    b: 1111,
    c: 22121,
    d: 33221,
    e: 43143,
    f: 525,
    g: 6361,
    h: 77131,
  },
  {
    key: '2',
    times: '达文西',
    status: 1,
    region: '二部',
    a: 21,
    b: 11,
    c: 221,
    d: 321,
    e: 443,
    f: 52,
    g: 61,
    h: 771,
  },
  {
    key: '3',
    times: 'suda',
    status: 1,
    region: '三部',
    a: 21,
    b: 11,
    c: 221,
    d: 321,
    e: 443,
    f: 52,
    g: 61,
    h: 771,
  },
])
const [registerTable, { setPagination, getSelectRows, setSelectedRowKeys, clearSelectedRowKeys }] = useTable({
  title: '',
  dataSource: tableData,
  //api: getMathList,
  columns,
  formConfig: {
    labelWidth: 120,
    //schemas: searchFormSchema,
    autoSubmitOnEnter: true,
    showAdvancedButton: true,
    autoAdvancedLine: 4,
    showSubmitButton: false,
  },
  rowSelection: {
    type: 'checkbox'
  },
  useSearchForm: false,
  showTableSetting: false,
  showIndexColumn: false,
  bordered: true,
  canResize: false,
  beforeFetch(info) {

  },
  sortFn(sortInfo) {

  }
})

// 选中所有行
function selectAllRows() {
  if (!allchecked.value) {
    const allKeys = tableData.value.map(row => row.key)
    setSelectedRowKeys(allKeys)
  } else {
    clearSelectedRowKeys()
  }
}

const { 
  initState,
  handleSearch,
  onCheckAllChange,
  handleInputChange,
  handleReset,
  removeAll,
  remove,
} = useTableInit({ state, tableData, columns, resultList })

// 初始化state数据
initState()

</script>

<style lang="less" scoped>
.hr-data{
  
  color:#333;
  .bottom_table {
    margin-top: 20px;
    position: relative;
    background: #ffffff;
    padding: 20px;

    .table_btnC {
      display: flex;
      align-items: baseline;
      position: absolute;
      bottom: 15px;
      left: 45px;
    }
    .result-wrap {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 10px;
      align-items: center;
      min-height: 30px;
      line-height: 30px;
      margin-top: 10px;
      border-radius: 4px;
      .result-item {
        flex: 1;
        font-size: 12px;
        margin-right: 15px;
        border: 1px solid #ccc;
        padding: 3px 10px;
        border-radius: 4px;
        box-sizing: border-box;
      }
      .result-clear {
        color: #209ee4;
        cursor: pointer;
        font-size: 14px;
        border: 1px solid;
        padding: 1px 5px;
      }
    }
  }
}
.tipes {
  font-size: 12px;
  color: #ccc;
  margin-bottom: 15px;
}
.filter-dropdown {
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #ccc;
}
:deep(.boxGroup) {
  display: flex;
  flex-direction: column;
}
</style>